<template>
  <el-dialog
    title="系统金币赠送"
    :before-close="handleClose"
    v-if="model_data"
    :visible.sync="is_look">
    <el-row class="pt15 pb15">
      <el-col :span="4">
        <div class="txt-right pr15 fwb">
          用户ID：
        </div>
      </el-col>
      <el-col :span="20">
        <span>{{model_data.id}}</span>
      </el-col>
    </el-row>
    <el-row class="pt15 pb15">
      <el-col :span="4">
        <div class="txt-right pr15 fwb">
          用户昵称：
        </div>
      </el-col>
      <el-col :span="20">
        <span>{{model_data.nickname}}</span>
      </el-col>
    </el-row>
    <el-row class="pt15 pb15">
      <el-col :span="4">
        <div class="txt-right pr15 fwb">
          金币赠送量：
        </div>
      </el-col>
      <el-col :span="20">
        <el-input
          style="width:80%;"
          v-model="coin"
          placeholder="请输入正整数，最大值为1000">
        </el-input>
        <span>金币</span>
      </el-col>
    </el-row>
    <el-row class="pt15 pb15">
      <el-col :span="20" :offset="4">
        <el-button type="info" @click="setGiveCion">
          确定
        </el-button>
        <el-button @click="celso">
          取消
        </el-button>

      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
  import api from '../../assets/js/api'
  export default {
    name: "order-model",
    data() {
      return {
        coin: ''
      }
    },
    props: ['is_look', 'model_data'],
    methods: {
      handleClose: function () {
        this.$emit("closefn", false)
      },
      setGiveCion: function () {
        let sub_ok = true;
        if (!this.coin) {
          this.$message.error('赠送金额不能为空！');
          sub_ok = false;
        } else {
          let str = /^[0-9]*[1-9][0-9]*$/;
          if (!str.test(this.coin)) {
            this.$message.error('请输入正整数,最大值为1000！');
            sub_ok = false;
          }else if(this.coin > 1000){
            this.$message.error('请输入正整数,最大值为1000！');
            sub_ok = false;
          }
        }
        if (sub_ok == true) {
          api.fetch("/api/admin/coin-records", {
            method: 'POST',
            data: {
              user_id:this.model_data.id,
              coin:this.coin
            }
          })
            .then(res => {
              this.$message({
                message: '赠送成功！',
                type: 'success'
              });
              this.coin='';
              this.handleClose();
            }).catch();
        }
      },
      celso:function(){
        this.handleClose()
      }
    }
  }
</script>

<style scoped>
  .goodbox span {
    display: inline-block;
    vertical-align: middle;
    line-height: 50px;
    font-size: 16px;
  }

  .goodbox span.goodimg {
    width: 50px;
    height: 50px;
  }

  .silver {
    color: #999;
  }
</style>
